Modernization and Migration of InputWithExamples to NumericInput folder #2121

SonicScrewdriver · 2025-01-16T22:09:41Z

Summary:

This PR is part of the Numeric Input Project work. It is being landed onto the feature/numeric-dx-refactor branch.

This PR contains the following changes:

Moves the InputWithExamples component to the NumericInput folder
Modernizes InputWithExamples to be a functional component
Addition of some comments

Video Example of Snapshot Testing:

Screen.Recording.2025-01-16.at.2.45.52.PM.mov

Issue: LEMS-2785

Test plan:

Ensure all tests pass
Manual testing with PR Snapshot in upstream consumer
Landing onto feature branch that will see full QA regression pass before deployment

github-actions · 2025-01-16T22:13:17Z

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (054c29c) and published it to npm. You
can install it using the tag PR2121.

Example:

yarn add @khanacademy/perseus@PR2121

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR2121

github-actions · 2025-01-16T22:13:27Z

Size Change: +74 B (+0.01%)

Total Size: 1.47 MB

Filename	Size	Change
`packages/perseus/dist/es/index.js`	396 kB	+74 B (+0.02%)

ℹ️ View Unchanged

Filename	Size
`packages/kas/dist/es/index.js`	39 kB
`packages/keypad-context/dist/es/index.js`	760 B
`packages/kmath/dist/es/index.js`	86.8 kB
`packages/math-input/dist/es/index.js`	77.7 kB
`packages/math-input/dist/es/strings.js`	1.79 kB
`packages/perseus-core/dist/es/index.js`	27.1 kB
`packages/perseus-editor/dist/es/index.js`	689 kB
`packages/perseus-linter/dist/es/index.js`	22.2 kB
`packages/perseus-score/dist/es/index.js`	113 kB
`packages/perseus/dist/es/strings.js`	5.1 kB
`packages/pure-markdown/dist/es/index.js`	3.66 kB
`packages/simple-markdown/dist/es/index.js`	12.5 kB

_{compressed-size-action}

SonicScrewdriver · 2025-01-16T22:53:32Z

packages/perseus/src/widgets/numeric-input/input-with-examples.tsx

+    const [state, setState] = React.useState<State>({
+        focused: false,
+        showExamples: false,
+    });


These two variables are always set together, so I've opted to keep this pairing after the shift to the functional component. I wasn't sure of a good name to explain both of them so I went "generic", but I could easily see an argument to rename this to something like "setFocusStates".

...Wait. If these are always set the exact same thing in multiple places ... why do we even need both? I bet we could just use "focused".

I've updated this to just use a single inputFocused state.

SonicScrewdriver · 2025-01-17T17:52:32Z

packages/perseus/src/widgets/numeric-input/input-with-examples.tsx

I opted to keep this a separate file as it seemed like too long a component to append to the numeric-input file.

mark-fitzgerald · 2025-01-18T01:39:40Z

packages/perseus/src/widgets/numeric-input/numeric-input.tsx

            focus: () => {
                if (inputRef.current) {
-                    inputRef.current.focus();
+                    inputRef.current?.focus();


Is the optional (?) needed when we have the code within a conditional that checks for its existence? I thought that Typescript was able to understand that.

Oooo I actually meant to replace the if conditional! Thank you for catching this

mark-fitzgerald

Thank you! Great progress on all this clean-up work.

…NumericInput folder

…er (#2121) ## Summary: This PR is part of the Numeric Input Project work. It is being landed onto the `feature/numeric-dx-refactor` branch. This PR contains the following changes: 1. Moves the InputWithExamples component to the NumericInput folder 2. Modernizes InputWithExamples to be a functional component 3. Addition of some comments Video Example of Snapshot Testing: https://github.com/user-attachments/assets/ca917778-50b0-46d2-89d8-dad95d1dadf2 Issue: LEMS-2785 ## Test plan: - Ensure all tests pass - Manual testing with PR Snapshot in upstream consumer - Landing onto feature branch that will see full QA regression pass before deployment Author: SonicScrewdriver Reviewers: SonicScrewdriver, mark-fitzgerald Required Reviewers: Approved By: mark-fitzgerald Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x) Pull Request URL: #2121

…er (#2121) This PR is part of the Numeric Input Project work. It is being landed onto the `feature/numeric-dx-refactor` branch. This PR contains the following changes: 1. Moves the InputWithExamples component to the NumericInput folder 2. Modernizes InputWithExamples to be a functional component 3. Addition of some comments Video Example of Snapshot Testing: https://github.com/user-attachments/assets/ca917778-50b0-46d2-89d8-dad95d1dadf2 Issue: LEMS-2785 - Ensure all tests pass - Manual testing with PR Snapshot in upstream consumer - Landing onto feature branch that will see full QA regression pass before deployment Author: SonicScrewdriver Reviewers: SonicScrewdriver, mark-fitzgerald Required Reviewers: Approved By: mark-fitzgerald Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x) Pull Request URL: #2121

…or` to `main` (#2209) ## Summary: This is the Feature Branch for the Numeric Input Project. This PR includes the following commits: - Move Numeric Input's UI related code to a functional component (#2108) - Refactoring Numeric Input helper functions to remove underscore (#2128) - Modernization and Migration of InputWithExamples to NumericInput folder (#2121) - [its-a-numeric-story] Improving Numeric Input Storybook Stories (#2138) - Ensure that Numeric Input Examples only show for correct answers. (#2159) - [3-quell-the-fracus] [Bug Fix] - Ensure that users hand typing tex into Numeric Inputs on Desktop do not cause an infinite loop. (#2182) - [fool-tips] Tooltip is Dead. Long Live Tooltip. (#2195) - [whole-fraction-fix] Ensure that whole numbers are not accepted answers for Numeric Inputs that require Improper fractions. (#2203) - [scrollin-aint-right] Fix right align scrollbars in Numeric Input (#2187) - [message-nit] Minor string adjustment (#2204) ## Test plan: - tests pass - lint passes - Passed a Full QA Regression Suite Author: SonicScrewdriver Reviewers: nishasy, SonicScrewdriver, handeyeco, mark-fitzgerald Required Reviewers: Approved By: nishasy Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x) Pull Request URL: #2209

SonicScrewdriver self-assigned this Jan 16, 2025

SonicScrewdriver changed the title ~~docs(changeset): Modernization and Migration of InputWithExamples to NumericInput folder~~ Modernization and Migration of InputWithExamples to NumericInput folder Jan 16, 2025

SonicScrewdriver commented Jan 16, 2025

View reviewed changes

SonicScrewdriver marked this pull request as ready for review January 16, 2025 23:12

SonicScrewdriver requested a review from mark-fitzgerald January 16, 2025 23:12

SonicScrewdriver commented Jan 17, 2025

View reviewed changes

mark-fitzgerald reviewed Jan 18, 2025

View reviewed changes

mark-fitzgerald approved these changes Jan 18, 2025

View reviewed changes

SonicScrewdriver added 5 commits January 28, 2025 12:07

Moving Input with Examples and converting to functional

Verified

This commit was signed with the committer’s verified signature.

vbudhram Vijay Budhram

GPG key ID: EBAEC5D86596C9EE

Verified
Learn about vigilant mode

008c1ac

docs(changeset): Modernization and Migration of InputWithExamples to …

175275b

…NumericInput folder

[input-examples-to-numeric] Updating comments to use proper formats

e61030f

[input-examples-to-numeric] Some additional comments to clean things up.

474ea02

[input-examples-to-numeric] Cleaning up redundant states

Loading
Loading status checks…

054c29c

SonicScrewdriver force-pushed the input-examples-to-numeric branch from 64d86ca to 054c29c Compare January 28, 2025 20:07

SonicScrewdriver merged commit e603970 into feature/numeric-dx-refactor Jan 28, 2025
8 checks passed

SonicScrewdriver deleted the input-examples-to-numeric branch January 28, 2025 20:13

SonicScrewdriver mentioned this pull request Feb 6, 2025

This is a feature-branch pull-request from feature/numeric-dx-refactor to main #2209

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Modernization and Migration of InputWithExamples to NumericInput folder #2121

Modernization and Migration of InputWithExamples to NumericInput folder #2121

SonicScrewdriver commented Jan 16, 2025 •

edited

Loading

github-actions bot commented Jan 16, 2025 •

edited

Loading

github-actions bot commented Jan 16, 2025 •

edited

Loading

SonicScrewdriver Jan 16, 2025

SonicScrewdriver Jan 16, 2025

SonicScrewdriver Jan 16, 2025

SonicScrewdriver Jan 17, 2025

mark-fitzgerald Jan 18, 2025

SonicScrewdriver Jan 20, 2025

mark-fitzgerald left a comment

Modernization and Migration of InputWithExamples to NumericInput folder #2121

Modernization and Migration of InputWithExamples to NumericInput folder #2121

Conversation

SonicScrewdriver commented Jan 16, 2025 • edited Loading

Summary:

Test plan:

github-actions bot commented Jan 16, 2025 • edited Loading

npm Snapshot: Published

github-actions bot commented Jan 16, 2025 • edited Loading

SonicScrewdriver Jan 16, 2025

Choose a reason for hiding this comment

SonicScrewdriver Jan 16, 2025

Choose a reason for hiding this comment

SonicScrewdriver Jan 16, 2025

Choose a reason for hiding this comment

SonicScrewdriver Jan 17, 2025

Choose a reason for hiding this comment

mark-fitzgerald Jan 18, 2025

Choose a reason for hiding this comment

SonicScrewdriver Jan 20, 2025

Choose a reason for hiding this comment

mark-fitzgerald left a comment

Choose a reason for hiding this comment

SonicScrewdriver commented Jan 16, 2025 •

edited

Loading

github-actions bot commented Jan 16, 2025 •

edited

Loading

github-actions bot commented Jan 16, 2025 •

edited

Loading